<template>  
    <div class="system-management">  
      <h2>系统管理</h2>  
      
      <div class="system-logs">  
        <h3>系统日志</h3>  
        <ul>  
          <li v-for="(log, index) in logs" :key="index">  
            {{ log.timestamp }} - {{ log.message }}  
          </li>  
        </ul>  
      </div>  
    
      <div class="system-settings">  
        <h3>系统设置</h3>  
        <form @submit.prevent="updateSettings">  
          <div>  
            <label for="systemName">系统名称:</label>  
            <input type="text" v-model="settings.systemName" required />  
          </div>  
          <div>  
            <label for="adminPassword">管理员密码:</label>  
            <input type="password" v-model="settings.adminPassword" />  
            <small>(留空则不更改)</small>  
          </div>  
          <button type="submit">更新设置</button>  
        </form>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        logs: [   
          { timestamp: '2024-10-01 10:00', message: '系统启动成功' },  
          { timestamp: '2024-10-01 11:00', message: '用户张三登录' }  
        ],  
        settings: {  
          systemName: '图书管理系统',   
          adminPassword: '' 
        }  
      };  
    },  
    methods: {  
      updateSettings() {  
        alert('系统设置已更新！');  
        if (!this.settings.adminPassword) {  
          this.settings.adminPassword = '';  
        }  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .system-management {  
    max-width: 800px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 8px;  
  }  
    
  .system-logs, .system-settings {  
    margin-bottom: 20px;  
  }  
    
  h3 {  
    margin-top: 0;  
  }  
    
  ul {  
    list-style-type: none;  
    padding: 0;  
  }  
    
  li {  
    background: #f9f9f9;  
    margin-bottom: 10px;  
    padding: 10px;  
    border: 1px solid #ddd;  
    border-radius: 4px;  
  }  
    
  form div {  
    margin-bottom: 15px;  
  }  
    
  label {  
    display: inline-block;  
    width: 120px;  
  }  
    
  input {  
    width: calc(100% - 130px);  
    padding: 8px;  
    box-sizing: border-box;  
  }  
    
  button {  
    padding: 10px 20px;  
    cursor: pointer;  
    background-color: #42b983;  
    color: white;  
    border: none;  
    border-radius: 4px;  
  }  
    
  button:hover {  
    background-color: #36976f;  
  }  
    
  small {  
    display: block;  
    margin-top: 5px;  
    color: #666;  
  }  
  </style>